<script setup lang="ts">
import { ref, watch } from "vue";

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  data: {
    type: Object,
    default: () => {
      return {};
    }
  }
});

const titleData = ref("电梯二维码");

const formVisible = ref(false);
const formData = ref(props.data);

const closeDialog = () => {
  formVisible.value = false;
};

const emit = defineEmits(["update:visible"]);
watch(
  () => formVisible.value,
  val => {
    emit("update:visible", val);
  }
);

watch(
  () => props.visible,
  val => {
    formVisible.value = val;
  }
);

watch(
  () => props.data,
  val => {
    titleData.value = val.tung + "栋" + val.unit + "单元电梯二维码";
    formData.value = val;
  }
);
</script>

<template>
  <el-dialog
    v-model="formVisible"
    :title="titleData"
    :width="420"
    draggable
    :before-close="closeDialog"
  >
    <el-card shadow="never">
      <el-row justify="space-between">
        <el-col>
          <el-card shadow="hover" class="mb-[10px] text-center">
            <el-image
              style="width: 200px; height: 200px"
              :src="formData.qrcodeurl"
              fit="cover"
            />
          </el-card>
        </el-col>
      </el-row>
    </el-card>
    <template #footer>
      <el-button @click="closeDialog">取消</el-button>
    </template>
  </el-dialog>
</template>
